import React from 'react';
import { View, StyleSheet } from 'react-native';

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createStackNavigator } from '@react-navigation/stack';
import { Text, BottomNavigation } from 'react-native-paper';
// @ts-ignore
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();
import {menuConfig, stackMenuType} from "../router/routerConfig";

export default function MyComponent() {
    return (
        <>
            <Tab.Navigator
                screenOptions={{
                    headerShown: false,
                }}
                tabBar={({ navigation, state, descriptors, insets }) => (
                    <BottomNavigation.Bar
                        navigationState={state}
                        safeAreaInsets={insets}
                        onTabPress={({ route, preventDefault }) => {
                            const event = navigation.emit({
                                type: 'tabPress',
                                target: route.key,
                                canPreventDefault: true,
                            });

                            if (event.defaultPrevented) {
                                preventDefault();
                            } else {
                                navigation.navigate(route.name)
                            }
                        }}
                        renderIcon={({ route, focused, color }) => {
                            const { options } = descriptors[route.key];
                            if (options.tabBarIcon) {
                                return options.tabBarIcon({ focused, color, size: 24 });
                            }

                            return null;
                        }}
                        getLabelText={({ route }) => {
                            const { options } = descriptors[route.key];
                            const label =
                                options.tabBarLabel !== undefined
                                    ? options.tabBarLabel
                                    : options.title !== undefined
                                        ? options.title
                                        // @ts-ignore
                                        : route.title;

                            return label;
                        }}
                    />
                )}
            >
                {/**
                 路由配置文件
                 */}
                {
                    menuConfig.map((item)=>{
                        return(
                            <Tab.Screen
                                key={item.name+'tab'}
                                name={item.name}
                                component={item.stackMenu?()=> {
                                    return(
                                        <Stack.Navigator screenOptions={{
                                            headerShown:false
                                        }} key={item.name+'stack'}>
                                            {
                                                item.stackMenu?.map((stack,index) => {
                                                    return (
                                                            <Stack.Screen key={index} name={stack.name} component={stack.component}/>
                                                    )
                                                })
                                            }
                                        </Stack.Navigator>
                                    )
                                }:item.component}
                                options={{
                                    tabBarLabel: item.tabBarLabel,
                                    tabBarIcon: ({ color, size }) => {
                                        return <Icon name={item.iconName} size={size} color={color} />;
                                    },
                                }}

                            />
                        )
                    })
                }

            </Tab.Navigator>
        </>

    );
}
